<template>
  <aside class="comp-aside"
    :class="{ 'is-collapse': AsideIsCollapse }"
    layout="column">

    <!-- 菜单区
    -------------------------- -->
    <el-menu
      flex
      :default-active="AsideDefaultActive"
      background-color="#253238"
      text-color="#6A8996"
      active-text-color="#fe9b38"
      :collapse="AsideIsCollapse"
      :unique-opened="IS_UNIQUE_OPENED"
      class="comp-aside__menu">

      <!-- Logo
      -------------------------- -->
      <li class="comp-aside__top"
      layout layout-align="between center">
        <div class="comp-aside__logo"
          :class="{ 'comp-aside__logo--collapse': AsideIsCollapse }">
          <img :src="LogoImg" alt="Logo">
        </div>
        <p class="comp-aside__title"
          v-if="!AsideIsCollapse">
          运营管理系统
        </p>
      </li>

      <!-- 展开/收拢按钮
      -------------------------- -->
      <li class="comp-aside__collapse-btn"
        @click="changeAsideCollapse"
        layout layout-align="center center">
        <i class="iconfont icon-liebiao7"></i>
      </li>

      <template v-for="(item, index) in AsideMenu">

        <!-- 展开菜单
        -------------------------- -->
        <submenu-temp :data="item"
          v-if="item.children"
          :index="`${index + 1}`"
          :key="index"></submenu-temp>

        <!-- 未展开菜单
        -------------------------- -->
        <el-menu-item :index="`${index + 1}`"
          v-else
          @click.native="handleClick(item.route)"
          :key="index">
          <i :class="[ item.icon ]"></i>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>

      </template>
    </el-menu>
  </aside>
</template>

<script>
import SubmenuTemp from './submenu-temp'
import { IS_UNIQUE_OPENED } from './config.js'

import LogoImg from 'assets/images/logo.jpg'
import { mapState } from 'vuex'

export default {
  name: 'CompAside',
  components: { SubmenuTemp },
  data () {
    return {
      IS_UNIQUE_OPENED,
      LogoImg
    }
  },
  computed: {
    ...mapState([
      'AsideIsCollapse', 'WindowWidth', 'AsideMenu', 'AsideDefaultActive'
    ])
  },
  watch: {
    WindowWidth: {
      immediate: true,
      handler (v) {
        const breakpoint = 960 // AsideIsCollapse改变的窗口宽度
        this.$store.commit('SetAsideIsCollapse', v < breakpoint)
      }
    }
  },
  methods: {
    handleClick (routeName) {
      this.$router.push({ name: routeName })
    },
    changeAsideCollapse () {
      this.$store.commit('SetAsideIsCollapse', !this.AsideIsCollapse)
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/components.scss";

@include b(aside) {
  width: $--aside-width;
  min-width: $--aside-width;
  height: 100%;
  overflow-x: hidden;

  @include e(top) {
    width: 100%;
    overflow: auto;
    height: $--header-height;
    background-color: $--color-primary;
    padding: 0 $--padding-base * 0.8 0 $--padding-base * 2;

    @include e(logo) {
      padding: 0 0 0 2px;
      img {
        height: 18px;
      }

      @include m(collapse) {
        width: 22px;
        overflow: hidden;
      }
    }

    @include e(title) {
      color: $--color-white;
      font-size: 13px;
      font-weight: bold;
      opacity: 1;
      overflow: hidden;
      white-space: nowrap;
      transition: opacity 0.3s linear;
    }
  }

  @include e(collapse-btn) {
    width: 100%;
    height: $--history-page-height;
    background-color: mix($--color-white, $--aside-background-color, 5%);
    color: $--aside-text-color;
    cursor: pointer;
    i {
      transform: rotate(90deg);
    }
  }

  @include when(collapse) {
    overflow-x: unset;
    width: $--aside-collapse-width;
    min-width: $--aside-collapse-width;
    @include e(top) { border-right-width: 1px; }
    @include e(title) { display: none; opacity: 0; }
    @include e(collapse-btn) { i { font-size: 15px;transform: rotate(0); } }
    .el-submenu__title, .el-menu-item {
      i { padding-left: 5px; font-size: 15px; }
    }
  }
}
</style>
